<style lang="scss">
    .msg_header{
        width: 100%;
        height: 40px;
        // border: 2px solid #dcdae2;
        background-color: #FFFFFF;
        line-height: 24px;
        
    }
    .msg_cnetnt{
        margin-top: 8px;
        padding: 20px 0px 0px 20px;
        height: calc(100vh - 166px);
        width: 100%;
        // border: 2px solid #dcdae2;
        background-color: #FFFFFF;
        .msg_list{
            // clear:both;
            // height:auto!important;
            // min-height:80px;
            width: 100%;
        }
    }
    .status{
        margin-left: 20px;
        float:left;
        padding: 8px 0px;
        // border-bottom: 2px solid #4EA0FE;;
    }
    .status:hover{
        background-color: #4EA0FE;
        cursor:pointer;
        color: #FFFFFF;
        
    }
    .list-body-content{
        padding: 6px 0 0;
        height: 100%;
        padding: 4px 0;
        overflow: auto;
        border-bottom: 1px dashed #dcdae2;
    }
    .list-content-item {
        margin: 0;
        line-height: normal;
        padding: 7px 16px;
        clear: both;
        // font-size: 14px !important;
        list-style: none;
        transition: background 0.2s ease-in-out;
        font-size: 13px;
        color: #999999;
 
    }
    .list_span{
        word-wrap:break-word; 
        word-break:break-all; 
        overflow: hidden;
        font-size: 13px;
        color: #999999;
    }
    .demo-badge-alone{
        font-family: "Monospaced Number";
        line-height: 1;
        vertical-align: middle;
        position: absolute;
        transform: translateX(50%);
        top: -6px;
        right: 0;
        height: 15px;
        border-radius: 8px;
        min-width: 10px;
        background: #ed4014;
        border: 1px solid transparent;
        color: #fff;
        line-height: 15px;
        text-align: center;
        padding: 0 4px;
        font-size: 12px;
        white-space: nowrap;
        transform-origin: -10% center;
        z-index: 10;
        box-shadow: 0 0 0 1px #fff;
    }
</style>
<template>
    <div style="width: 100%;height:calc(100vh - 118px);">
        <div class="msg_header">
            <div class="status" @click="changeStatus('all')" :style="{borderBottom: checkStatus == 'all' ? '2px solid #4EA0FE': '0px solid #FFFFFF'}">
                <span>全部</span>
            </div>
            <div class="status" @click="changeStatus('wait')" :style="{borderBottom: checkStatus == 'wait' ? '2px solid #4EA0FE': '0px solid #FFFFFF'}">
                <Badge :count="unReadMsg.total" class-name="demo-badge-alone">
                    <span>待阅</span>
                </Badge>
            </div>
            <div class="status" @click="changeStatus('already')" :style="{borderBottom: checkStatus == 'already' ? '2px solid #4EA0FE': '0px solid #FFFFFF'}">
                <span>已阅</span>
            </div>
        </div>
        <div class="msg_cnetnt">
            <div style="overflow: auto;height: calc(100vh - 238px);">
                <div class="msg_list">
                    <template v-if="showMsg.records!=undefined && showMsg.records.length > 0">
                        <template v-for="(item, index) in showMsg.records">
                            <ul class="list-body-content" :key="index">
                                <div style="width: 80%;float:left;">
                                    <li class="list-content-item">
                                        <span style="font-weight: bold;color: #333333;font-size: 13px;">
                                            <span v-if="item.isRead == 0 && checkStatus != 'already'" style="color:red">【未读】</span>
                                        {{item.title}}</span>
                                    </li>
                                    <li class="list-content-item">
                                        <span v-if="item.type != 2" class="list_span">{{item.des}}</span>
                                        <!-- <article v-else class="list_span" v-html="transTxt(item.des)"></article> -->
                                        <span v-else class="list_span">{{transTxt(item.des)}}</span>
                                    </li>
                                    <li class="list-content-item">
                                        <span>{{formatTime(item.startTime)}}</span><span style="padding-left: 20px"><Icon type="ios-time-outline" />{{times(item.startTime)}}</span>
                                    </li>
                                </div>
                                <div style="width: 20%;float:left;text-align: center; line-height: 100px;">
                                    <Button @click="showMessageInfo(item)">查看详情</Button>
                                </div>
                            </ul>
                        </template>
                    </template>
                    <ul v-else>
                        <li  class="list-content-item" style="text-align: center;"><span>暂无消息内容</span></li>
                    </ul>
                    
                </div>
            </div>
            <div style="margin: 10px;overflow: hidden">
                <div style="float: right;">
                    <Page :current="showMsg.current" :total="showMsg.total"   @on-change="changePage"></Page>
                </div>
            </div>
            <component  ref="msgModal" :is="'msgModal'"  v-model="isshowMsg" :msgInfo="showMsgInfo"></component>
        </div>
    </div>
    
</template>
<script>
    import msgModal from './message_modal'
    import ajax from "../ajax_util"
    import marked from 'marked'
    export default {
        components:{
            msgModal
        },
        data(){
            return{
                isshowMsg: false,
                showMsgInfo: {},
                checkStatus: "all",
                allMsg: {},
                readMsg:{},
                unReadMsg: {},
                showMsg: {},
                current: 1, // 当前页码
                messageNumber: 10, //每页显示条数

            }
        },
        mounted:function(){
            this.getAllMsg()
            this.getUnread()
        },
        methods:{
            transTxt(des){
                // return marked(des, { sanitize: true })

                var input = marked(des, { sanitize: true });
                var str = input.replace(/<(style|script|iframe)[^>]*?>[\s\S]+?<\/\1\s*>/gi,'').replace(/<[^>]+?>/g,'').replace(/\s+/g,' ').replace(/ /g,' ').replace(/>/g,' ');
                return str.replace("&gt;"," ")
            },
            //计算时间差
            times(value){
                return this.utils.times(new Date(value).getTime()*1000)

            },
            // 获取全部的消息
            getAllMsg(){
                var url = this.CONFIG.msg_url + "/my/all" 
                var that=this;
                var params = {
                    current: this.current,
                    pageSize: this.messageNumber
                }
                ajax.get({
                    url: url,
                    that: that,
                    params: params,
                    success:function(data){
                        console.log("------getAllMsg-----",data);
                        that.allMsg = data
                        that.showMsg = data
                    }
                })
            },
            getRead(){
                var url = this.CONFIG.msg_url + "/my/read" 
                var that=this;
                var params = {
                    current: this.current,
                    pageSize: this.messageNumber
                }
                ajax.get({
                    url: url,
                    that: that,
                    params: params,
                    success:function(data){
                        console.log("------getRead-----",data);
                        that.readMsg = data
                        that.showMsg = data
                    }
                })
            },
            getUnread(){
                var url = this.CONFIG.msg_url + "/my/unread" 
                var that=this;
                var params = {
                    current: this.current,
                    pageSize: this.messageNumber
                }
                ajax.get({
                    url: url,
                    that: that,
                    params: params,
                    success:function(data){
                        console.log("------getUnread-----",data);
                        if(that.checkStatus == 'wait'){
                            that.showMsg = data
                        }
                        that.unReadMsg = data
                    }
                })
            },
            // 切换状态
            changeStatus(value){
                this.current = 1
                this.checkStatus = value
                if(value == "all"){
                    this.getAllMsg()
                }else if(value == "wait"){
                    this.getUnread()
                }else if(value == "already"){
                    this.getRead()
                }
            },
            formatTime(time){
                return this.utils.formatDate(new Date(time*1000), "yyyy-MM-dd hh:mm")
            },
            // 显示详情窗口
            showMessageInfo(item){
                if(this.checkStatus == 'wait'){
                    this.unReadMsg.total -- 
                    var index = -1
                    this.unReadMsg.records.forEach((i,key) => {
                        if(i.id == item.id){
                            index =key
                        }
                    });
                    this.unReadMsg.records.splice(index, 1);
                }
                item.isRead = 1
                this.isshowMsg = true
                this.showMsgInfo = item
            },
            // 跳转页面
            changePage(page){
                this.current = page
                console.log(page)
                var value = this.checkStatus
                if(value == "all"){
                    this.getAllMsg()
                }else if(value == "wait"){
                    this.getUnread()
                }else if(value == "already"){
                    this.getRead()
                }
            }
        }
        
    }
</script>